<script setup>
import { ref } from "vue";
const option = ref({
  title: {
    text: "各朝代自然科学成就数量",
    left: "center",
    top: 8,
    textStyle: {
      color: "#000",
    },
  },
  tooltip: {
    trigger: "item",
    formatter: function(params) {
      let data = params.data;
      let total = 0;
      let tooltipContent = params.name + "<br>";
      let categoryData = [];
      categoryData = [
        { name: "天文地理", value: data.astronomy },
        { name: "数学", value: data.mathematics },
        { name: "医学", value: data.medicine },
        { name: "农学", value: data.agriculture },
        { name: "军事", value: data.military },
        { name: "工程技术", value: data.engineering },
        { name: "综合", value: data.comprehensive }
      ];
      for (let i = 0; i < categoryData.length; i++) {
        if (categoryData[i].value > 0) {
          total += categoryData[i].value;
          tooltipContent += categoryData[i].name + " : " + categoryData[i].value + "项<br>";
        }
      }
      tooltipContent += "总计 : " + total + "项";
      return tooltipContent;
    }
  },
  series: [
    {
      color: [
        "#D7AFAD",
        "#8dc6c2",
        "#E5CDDD",
        "#C7BED3",
        "#eed046",
        "#738BAD",
        "#85A397",
        "#E1B882",
        "#D9A89A",
        "#B67271",
        "#B1C6E1",
        "#D2A1BF",
        "#9D8DB2",
      ],
      top: 30,
      selectedMode: "single",
      name: "中国古代自然科学成就",
      type: "pie",
      radius: ["40%", "63%"],
      center: ["50%", "50%"],
      data: [
        {
          value: 45,
          name: "元朝",
          astronomy: 10,
          mathematics: 8,
          medicine: 5,
          agriculture: 6,
          military: 3,
          engineering: 8,
          comprehensive: 6
        },
        {
          value: 72,
          name: "唐朝",
          astronomy: 18,
          mathematics: 6,
          medicine: 12,
          agriculture: 7,
          military: 5,
          engineering: 10,
          comprehensive: 9
        },
        {
          value: 86,
          name: "明朝",
          astronomy: 15,
          mathematics: 7,
          medicine: 9,
          agriculture: 12,
          military: 8,
          engineering: 12,
          comprehensive: 15
        },
        {
          value: 50,
          name: "汉朝",
          astronomy: 15,
          mathematics: 5,
          medicine: 10,
          agriculture: 6,
          military: 4,
          engineering: 7,
          comprehensive: 8
        },
        {
          value: 5,
          name: "秦朝",
          astronomy: 1,
          mathematics: 0,
          medicine: 0,
          agriculture: 1,
          military: 2,
          engineering: 2,
          comprehensive: 1
        },
        {
          value: 93,
          name: "宋朝",
          astronomy: 22,
          mathematics: 14,
          medicine: 11,
          agriculture: 9,
          military: 7,
          engineering: 15,
          comprehensive: 12
        },
        {
          value: 45,
          name: "先秦",
          astronomy: 12,
          mathematics: 6,
          medicine: 5,
          agriculture: 8,
          military: 7,
          engineering: 3,
          comprehensive: 4
        },
        {
          value: 14,
          name: "三国",
          astronomy: 3,
          mathematics: 2,
          medicine: 3,
          agriculture: 2,
          military: 2,
          engineering: 2,
          comprehensive: 1
        },
        {
          value: 25,
          name: "两晋",
          astronomy: 5,
          mathematics: 4,
          medicine: 6,
          agriculture: 3,
          military: 1,
          engineering: 4,
          comprehensive: 2
        },
        {
          value: 30,
          name: "南北朝",
          astronomy: 7,
          mathematics: 3,
          medicine: 7,
          agriculture: 5,
          military: 2,
          engineering: 5,
          comprehensive: 3
        },
        {
          value: 6,
          name: "五代十国",
          astronomy: 1,
          mathematics: 0,
          medicine: 1,
          agriculture: 1,
          military: 1,
          engineering: 1,
          comprehensive: 0
        },
        {
          value: 14,
          name: "隋朝",
          astronomy: 4,
          mathematics: 1,
          medicine: 1,
          agriculture: 2,
          military: 3,
          engineering: 3,
          comprehensive: 2
        },
        {
          value: 72,
          name: "清朝",
          astronomy: 11,
          mathematics: 5,
          medicine: 7,
          agriculture: 8,
          military: 6,
          engineering: 14,
          comprehensive: 10
        }
      ].sort((a, b) => b.value - a.value),
    },
  ],
});
</script>

<template>
  <!-- 科学成就页面的饼图 -->
  <ECharts class="chart" :option="option" autoresize />
</template>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
